﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片左右滑动效果 - leo</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>

</head>

<body>

<div class="box" id="play">
    <p class="prev">&laquo;</p>
    <p class="next">&raquo;</p>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
<script type="text/javascript">
    
    var Index = 0;
    $('ul').width($('ul>li').eq(0).width()*$('ul>li').length);


    $('.next').on({
        'click':function(){
            Index++;
            if(Index == $('ol > li').length)Index = 0;
            $('ol > li').removeClass('active');
            $('ol > li').eq(Index).addClass('active');
            $('ul').stop().animate({
                'left':-Index * $('ul>li').eq(0).width()
            },500);
        },
        'mousedown':function(){
            return false;
        }
    });

    $('.prev').on({
        'click':function(){
            Index--;
            if(Index == -1)Index =  $('ol > li').length-1;
            $('ol > li').removeClass('active');
            $('ol > li').eq(Index).addClass('active');
            $('ul').stop().animate({
                'left':-Index * $('ul>li').eq(0).width()
            },500);
        },
        'mousedown':function(){
            return false;
        }
    });
    $('ol > li').on({
        'mouseover': function(){
            $('ol > li').removeClass('active');
            $(this).addClass('active');
            $('ul').stop().animate({
                'left':-$(this).index() * $('ul>li').eq(0).width()
            },500);
            Index = $(this).index();
           // alert($(this).index());
        }
    })
</script>
</body>
</html>
